<template>
    <div class="mkCosntBox">
        <div class="TopbjBox" 
            :style="{ 
                background: topBjType ? 
                    `url(${changxianUrl}) no-repeat center center/cover` : 
                    `url(${duanxianUrl}) no-repeat center center/cover` 
            }">
            <div class="TopbjBoxLeft">
                <div class="dianBox"></div>
                <span class="topTitleBox">{{ title }}</span>
            </div>
            <div class="TopbjBoxRight">
                <slot name="TitleRight"></slot>
            </div>
        </div>
        <div class="nrBox">
            <slot name="nr"></slot>
        </div>
    </div>
</template>
<script setup>
import { ref, computed } from 'vue';
// 新增图片导入
import changxianImg from '@/assets/daping/changxian.png';
import duanxianImg from '@/assets/daping/duanxian.png';

const changxianUrl = ref(new URL(changxianImg, import.meta.url).href);
const duanxianUrl = ref(new URL(duanxianImg, import.meta.url).href);
defineProps({
    title: {
        type: String,
        default: '默认标题'
    },
    topBjType: {
        type: Boolean,
        default: false
    }
});
</script>
<style scoped lang="scss">
.mkCosntBox {
    width: 100%;
    height: 100%;
    border: 1px solid #45A5FF;
    background: linear-gradient(180deg, rgba(52, 134, 206, 0) 0%, #3486CE 100%);

    .TopbjBox {
        width: 100%;
        // height: 5%;
        height: 40px;
        // background: url("../../assets/daping/changxian.png") no-repeat center center/cover;
        display: flex;
        align-content: center;
        justify-content: space-between;
        padding: 0 10px 0 20px;
        border-bottom: 1px solid #45A5FF;

        .TopbjBoxLeft {
            display: flex;
            align-items: center;
            gap: 10px;

            .dianBox {
                width: 6px;
                height: 6px;
                background: #D9D9D9;
                border-radius: 50%;
            }

            .topTitleBox {
                font-weight: bold;
                font-size: 16px;
                color: #FFFFFF;
            }
        }

        .TopbjBoxRight {
            display: flex;
            align-items: center;
        }
    }

    .nrBox {
        padding: 10px;
        box-sizing: border-box;
        width: 100%;
        height: calc(100% - 40px);
    }
}
</style>